<template>
  <div>
    <div class="head-outer">
      <el-avatar :size="50" fit="fill" :src="circleUrl"></el-avatar>
      <el-tag>{{ idStore.waiterName }}</el-tag>
      <el-select v-model="state">
        <el-option label="在线" value="1"></el-option>
        <el-option label="离线" value="0"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index-header",
  data() {
    return {
      state: "1",
      circleUrl: require("/static/images/service.jpg"),
    };
  },
  computed: {
    ...mapState(["idStore"]),
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.head-outer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f0f0f0;
  > * {
    margin: 0 10px;
  }
.el-avatar {
   color:#ccc;
   ::v-deep  >img {
      width: 100%;
    }
  }
}
</style>